<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>One Doc</title>
    <style>
        body {
            margin: 0;
            background: #f5f5f5;
        }

        .nav-bar {
            background-color: #333;
            overflow: hidden;
            height: 50px;
            width: 100%;
            position: relative;
            color: #FFF;
            line-height: 50px;
            text-align: center;
        }

        .card {
            width: 80vw;
            max-width: 560px;
            height: 100vw;
            max-height: 700px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            margin: 20px auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            cursor: text;
            overflow: hidden;
        }

        .card h1 {
            font-size: 2rem;
            font-weight: 400;
            margin: 0;
            z-index: 2;
        }

        .card:after {
            position: absolute;
            content: '';
            right: 0;
            top: -100px;
            animation: animate 2s linear infinite;
        }

        .card:nth-child(2):after {
            top: 0;
        }

        @keyframes animate {
            100% {
                transition-duration: 1s;
                border-bottom: 50px solid #ccc;
                border-right: 50px solid white;
                border-radius: 0 0 0 4px;
            }
        }

        .card .point {
            /* three points below */
            position: absolute;
            top: calc(50% - 10px);
            width: 0;
            height: 0;
            z-index: 1;
            display: none;
            cursor: pointer;
        }

        .card:hover .point {
            display: block;
        }

        .card .point-right {
            right: 5px;
            border-top: 20px solid transparent;
            border-left: 20px solid #ccc;
            border-bottom: 20px solid transparent;
            border-radius: 0 0 0 4px;
        }

        .card .point-left {
            left: 5px;
            border-top: 20px solid transparent;
            border-right: 20px solid #ccc;
            border-bottom: 20px solid transparent;
            border-radius: 0 0 4px 0;
        }

        .card .sheet {
            background: repeating-linear-gradient(45deg, #fff, #fff 30px, #f5f5f5 30px, #f5f5f5 60px);
            width: 166.6%;
            height: 133.3%;
            position: absolute;
            top: -12%;
            left: -33.3%;
            transform: rotate(135deg);
            z-index: 0;
        }

        small.comment {
            font-size: 0.8rem;
            font-weight: 300;
            margin: 0;
            text-align: center;
            z-index: 2;
        }

        span.highlight {
            color: #f00;
        }

        span.logo {
            font-size: 2rem;
            font-weight: 700;
            color: #fff;
            font-family: Monaco, monospace;
        }

        .icon {
            position: absolute;
            top: 10px;
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            animation: pulse 1s;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }

        .icon:hover {
            cursor: pointer;
            fill: #f00;
            transform: scale(1.2);
        }

        .icon:hover svg path {
            fill: #f00;
        }

        .icon svg {
            width: 20px;
            height: 20px;
        }

        .icon svg path {
            fill: #000;
        }

        .setting {
            right: 10px;
        }

        .github {
            right: 60px;
        }

        .gitee {
            right: 110px;
        }
    </style>
</head>
<body>
<div class="nav-bar">
    <div class="setting icon">
        <svg t="1669172278037" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="2688" width="200" height="200">
            <path d="M439.264 208a16 16 0 0 0-16 16v67.968a239.744 239.744 0 0 0-46.496 26.896l-58.912-34a16 16 0 0 0-21.856 5.856l-80 138.56a16 16 0 0 0 5.856 21.856l58.896 34a242.624 242.624 0 0 0 0 53.728l-58.88 34a16 16 0 0 0-6.72 20.176l0.848 1.68 80 138.56a16 16 0 0 0 21.856 5.856l58.912-34a239.744 239.744 0 0 0 46.496 26.88V800a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16v-67.968a239.744 239.744 0 0 0 46.512-26.896l58.912 34a16 16 0 0 0 21.856-5.856l80-138.56a16 16 0 0 0-4.288-20.832l-1.568-1.024-58.896-34a242.624 242.624 0 0 0 0-53.728l58.88-34a16 16 0 0 0 6.72-20.176l-0.848-1.68-80-138.56a16 16 0 0 0-21.856-5.856l-58.912 34a239.744 239.744 0 0 0-46.496-26.88V224a16 16 0 0 0-16-16h-160z m32 48h96v67.376l28.8 12.576c13.152 5.76 25.632 12.976 37.184 21.52l25.28 18.688 58.448-33.728 48 83.136-58.368 33.68 3.472 31.2a194.624 194.624 0 0 1 0 43.104l-3.472 31.2 58.368 33.68-48 83.136-58.432-33.728-25.296 18.688c-11.552 8.544-24.032 15.76-37.184 21.52l-28.8 12.576V768h-96v-67.376l-28.784-12.576c-13.152-5.76-25.632-12.976-37.184-21.52l-25.28-18.688-58.448 33.728-48-83.136 58.368-33.68-3.472-31.2a194.624 194.624 0 0 1 0-43.104l3.472-31.2-58.368-33.68 48-83.136 58.432 33.728 25.296-18.688a191.744 191.744 0 0 1 37.184-21.52l28.8-12.576V256z m47.28 144a112 112 0 1 0 0 224 112 112 0 0 0 0-224z m0 48a64 64 0 1 1 0 128 64 64 0 0 1 0-128z"
                  p-id="2689"></path>
        </svg>
    </div>

    <div class="github icon">
        <svg t="1669172528429" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="3605" width="200" height="200">
            <path d="M0 556.416C0 602.816 4.352 644.8 13.024 682.336 21.696 719.904 33.728 752.544 49.088 780.224 64.416 807.936 83.968 832.32 107.648 853.344 131.36 874.368 157.056 891.552 184.768 904.928 212.48 918.272 244.096 929.12 279.648 937.472 315.2 945.824 351.52 951.648 388.576 955.008 425.632 958.336 466.336 960 510.752 960 555.488 960 596.384 958.336 633.44 955.008 670.496 951.648 706.88 945.824 742.592 937.472 778.304 929.12 810.112 918.272 837.984 904.928 865.856 891.552 891.712 874.368 915.584 853.344 939.456 832.32 959.168 807.936 974.688 780.224 990.208 752.544 1002.304 719.904 1010.976 682.336 1019.648 644.8 1024 602.816 1024 556.416 1024 473.632 996.288 402.016 940.896 341.6 943.872 333.568 946.624 324.48 949.152 314.304 951.648 304.128 953.984 289.6 956.16 270.752 958.336 251.872 957.504 230.112 953.664 205.408 949.824 180.704 942.72 155.488 932.352 129.792L924.864 128.288C919.52 127.296 910.752 127.52 898.56 129.024 886.368 130.528 872.192 133.536 856 138.048 839.808 142.56 818.944 151.232 793.408 164.096 767.872 176.928 740.928 193.056 712.544 212.416 663.808 199.04 596.864 192.384 511.744 192.384 426.944 192.384 360.192 199.04 311.456 212.416 283.072 193.056 255.968 176.928 230.08 164.096 204.224 151.232 183.616 142.56 168.256 138.048 152.896 133.536 138.528 130.624 125.184 129.28 111.84 127.936 103.392 127.52 99.904 128.032 96.384 128.544 93.632 129.12 91.648 129.792 81.28 155.488 74.176 180.672 70.368 205.408 66.528 230.112 65.696 251.872 67.84 270.752 70.016 289.6 72.352 304.128 74.848 314.304 77.376 324.48 80.128 333.568 83.136 341.6 27.712 402.016 0 473.632 0 556.416ZM125.696 682.08C125.696 634.016 147.552 589.952 191.296 549.888 204.288 537.888 219.488 528.8 236.832 522.592 254.208 516.448 273.824 512.928 295.68 512.096 317.536 511.264 338.496 511.424 358.528 512.608 378.56 513.76 403.264 515.36 432.64 517.344 462.016 519.36 487.392 520.352 508.736 520.352 530.112 520.352 555.488 519.36 584.864 517.344 614.24 515.36 638.944 513.76 658.976 512.608 679.008 511.424 699.936 511.264 721.792 512.096 743.68 512.928 763.296 516.448 780.64 522.592 798.016 528.768 813.184 537.888 826.208 549.888 869.952 589.28 891.808 633.344 891.808 682.08 891.808 710.816 888.224 736.256 881.024 758.464 873.856 780.672 864.672 799.264 853.504 814.304 842.304 829.312 826.784 842.08 806.944 852.608 787.072 863.104 767.712 871.2 748.832 876.896 729.984 882.56 705.792 886.976 676.224 890.144 646.688 893.312 620.32 895.232 597.12 895.904 573.92 896.576 544.448 896.928 508.736 896.928 473.024 896.928 443.552 896.576 420.352 895.904 397.152 895.232 370.784 893.312 341.248 890.144 311.712 886.976 287.52 882.56 268.64 876.896 249.792 871.2 230.432 863.104 210.56 852.608 190.688 842.08 175.168 829.312 164 814.304 152.8 799.264 143.616 780.672 136.448 758.464 129.28 736.256 125.696 710.816 125.696 682.08ZM640 672A2 3 2520 1 0 768 672 2 3 2520 1 0 640 672zM256 672A2 3 2520 1 0 384 672 2 3 2520 1 0 256 672z"
                  p-id="3606"></path>
        </svg>
    </div>

    <div class="gitee icon">
        <svg t="1669172634483" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="3788" width="200" height="200">
            <path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
                  fill="#C71D23" p-id="3789"></path>
        </svg>
    </div>
    <span class="logo">
        one doc
    </span>
</div>
<div class="card">
    <h1>One Doc</h1>
    <small class="comment">One Doc is a simple <span class="highlight">online</span> doc preview website</small>
</div>
<div class="card">
    <div class="sheet"></div>
    <h1>Support Platforms</h1>
    <small class="comment">One Doc supports the following platforms：<span class="highlight">Windows, Linux, MacOS</span></small>
    <small class="comment">support responsive</small>
</div>
<div class="card">
    <div class="point point-left"></div>
    <div class="point point-right"></div>
    <h1>Support Doc Types</h1>
    <small class="comment">You can preview following docs: <span class="highlight">.doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf</span></small>
</div>
</body>
</html>
